<!doctype html>
<!--
@license
Copyright 2018 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
  <title>button demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script type="module" src="../node_modules/@material/mwc-button/mwc-button.js"></script>
  <script type="module" src="../node_modules/@material/mwc-icon/mwc-icon.js"></script>
  <link rel="stylesheet" href="demo-component.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
  <style>
    mwc-button {
      margin: 20px;
    }
  </style>
</head>
<body class="unresolved">
  <header>
    <a href="index.html"><mwc-icon>arrow_back</mwc-icon>
    <span>Buttons</span></a>
  </header>

  <main>
    <h2>Standard</h2>
    <div class="demo-group wrap">
      <mwc-button label="standard"></mwc-button>
      <mwc-button label="standard" icon="code"></mwc-button>
    </div>

    <h2>Outlined</h2>
    <div class="demo-group wrap">
      <mwc-button outlined label="outlined"></mwc-button>
      <mwc-button outlined label="outlined" icon="code"></mwc-button>
    </div>

    <h2>Raised</h2>
    <div class="demo-group wrap">
      <mwc-button raised label="raised"></mwc-button>
      <mwc-button raised label="raised" icon="code"></mwc-button>
    </div>

    <h2>Unelevated</h2>
    <div class="demo-group wrap">
      <mwc-button unelevated label="unelevated"></mwc-button>
      <mwc-button unelevated label="unelevated" icon="code"></mwc-button>
    </div>

    <h2>Dense</h2>
    <div class="demo-group wrap">
      <mwc-button dense unelevated label="dense"></mwc-button>
      <mwc-button dense unelevated label="dense" icon="code"></mwc-button>
    </div>

    <h2>Trailing icon</h2>
    <div class="demo-group wrap">
      <mwc-button label="trailing icon" icon="code" trailingIcon></mwc-button>
      <mwc-button outlined label="trailing icon" icon="code" trailingIcon></mwc-button>
      <mwc-button raised label="trailing icon" icon="code" trailingIcon></mwc-button>
      <mwc-button unelevated label="trailing icon" icon="code" trailingIcon></mwc-button>
    </div>

    <h2>Disabled</h2>
    <div class="demo-group wrap">
      <mwc-button disabled label="disabled" icon="code"></mwc-button>
      <mwc-button disabled outlined label="disabled" icon="code"></mwc-button>
      <mwc-button disabled raised label="disabled" icon="code"></mwc-button>
      <mwc-button disabled unelevated label="disabled" icon="code"></mwc-button>
    </div>

    <h2>Styling</h2>
    <style data-pre="main-colors">
.main-colors {
  --mdc-theme-primary: darkgreen;
  --mdc-theme-on-primary: aqua;
  --mdc-button-disabled-fill-color: darkseagreen;
  --mdc-button-disabled-ink-color: aliceblue;
}
    </style>
    <pre id="main-colors"></pre>
    <div class="demo-group wrap main-colors">
      <mwc-button icon="code" label="standard"></mwc-button>
      <mwc-button outlined icon="code" label="outlined"></mwc-button>
      <mwc-button raised icon="code" label="raised"></mwc-button>
      <mwc-button raised icon="code" label="raised-disabled" disabled></mwc-button>
      <mwc-button unelevated icon="code" label="unelevated"></mwc-button>
      <mwc-button unelevated icon="code" label="unelevated-disabled" disabled></mwc-button>
    </div>

    <style data-pre="text">
.text {
  --mdc-button-text-transform: lowercase;
  --mdc-button-letter-spacing: 5px;
}
    </style>
    <pre id="text"></pre>
    <div class="demo-group wrap text">
      <mwc-button icon="code" label="lowerspace"></mwc-button>
      <mwc-button outlined icon="code" label="lowerspace"></mwc-button>
      <mwc-button raised icon="code" label="lowerspace"></mwc-button>
      <mwc-button unelevated icon="code" label="lowerspace"></mwc-button>
    </div>

    <style data-pre="horizontal-padding">
.horizontal-padding {
  --mdc-button-horizontal-padding: 50px;
}
    </style>
    <pre id="horizontal-padding"></pre>
    <div class="demo-group wrap horizontal-padding">
      <mwc-button icon="code" label="padding"></mwc-button>
      <mwc-button outlined icon="code" label="padding"></mwc-button>
      <mwc-button raised icon="code" label="padding"></mwc-button>
      <mwc-button unelevated icon="code" label="padding"></mwc-button>
    </div>

    <style data-pre="outline">
.outline .themed {
  --mdc-theme-primary: royalblue;
  --mdc-button-disabled-ink-color: powderblue;
}

.outline .outline-different {
  --mdc-button-outline-color: darkgreen;
  --mdc-button-disabled-outline-color: palegreen;
  --mdc-button-disabled-ink-color: plum;
}

.outline .width {
  --mdc-button-outline-width: 5px;
}
    </style>
    <pre id="outline"></pre>
    <div class="demo-group wrap outline">
      <mwc-button outlined class="themed" icon="code" label="themed"></mwc-button>
      <mwc-button outlined class="themed" disabled icon="code" label="themed"></mwc-button>
      <mwc-button outlined class="outline-different" icon="code" label="outline-different"></mwc-button>
      <mwc-button outlined class="outline-different" disabled icon="code" label="outline-different"></mwc-button>
      <mwc-button outlined class="width" icon="code" label="width"></mwc-button>
      <mwc-button outlined class="width" disabled icon="code" label="width"></mwc-button>
    </div>
  </main>

  <script>
    document.querySelectorAll('style[data-pre]').forEach(function(e) {
      const preId = e.dataset.pre;
      const pre = document.querySelector('#' + preId);
      if (pre) {
        pre.innerText = e.innerText;
      }
    });

    addEventListener('load', () => document.body.classList.remove('unresolved'));
  </script>
</body>
</html>
